<template>
  <div class="box" v-if="show">
    <div class="column" id="top">
      <hls-video :id="1" :src="playing[0]" style="  width: 237.55px; height: 200px;" @change-url="changeUrl"/>
      <hls-video :id="2" :src="playing[1]" style="  width: 237.55px; height: 200px;" @change-url="changeUrl"/>
      <hls-video :id="3" :src="playing[2]" style="  width: 237.55px; height: 200px;" @change-url="changeUrl"/>
    </div>
    <div class="column" id="bottom">
      <hls-video :id="4" :src="playing[3]" style="  width: 237.55px; height: 200px;" @change-url="changeUrl"/>
      <hls-video :id="5" :src="playing[4]" style="  width: 237.55px; height: 200px;" @change-url="changeUrl"/>
      <hls-video :id="6" :src="playing[5]" style="  width: 237.55px; height: 200px;" @change-url="changeUrl"/>
    </div>
  </div>
</template>

<script>
import hlsVideo from "../camera/hlsVideo";
import {copyObj} from "../../common/utils";
import {getCameraUrl, queryArtemisCamera} from "../../network/cameraVideoApi";

export default {
  name: "sixCamera",
  components: {hlsVideo},
  data() {
    return {
      show: false,
      playing: [],
      cameraList: [],
      indexCodes: [],
      //轮播摄像头切换编号
      cameraIndex: 0

    }
  },
  methods: {
    async updatePlayingUrl(idList) {
      let array = []
      for (let i = 0; i < idList.length; i++) {
        let id = idList[i]
        await getCameraUrl({showMessage: 1, id}).then(res => {
          array.push(res.data)
        })
      }
      return array
    },
    /**
     * 更新当前播放的摄像头id数组，更换一个指定下标为新的摄像头id，并保证不重复
     * @param i 数组下标
     * @returns {*} 新摄像头id
     */
    updateRandomIndexCode(i) {
      let index;
      let item;
      do {
        index = Math.floor(Math.random() * this.cameraList.length)
        item = this.cameraList[index];
      } while (this.indexCodes.includes(item))
      this.indexCodes[i] = item;
      return item;
    },
    //更新需要更换地址的摄像头下标
    updateCameraIndex() {
      this.cameraIndex++
      this.cameraIndex = this.cameraIndex % 6
    },
    //获取摄像头播放地址，并替换到播放地址数组的指定下标
    getCameraUrl(id, index) {
      return getCameraUrl({id}).then(res => {
        this.playing[index] = res.data;
        this.playing = copyObj(this.playing)
        if (this.playing.length === 6) {
          this.show = true
        }
      });
    },
    play() {
      let id = this.updateRandomIndexCode(this.cameraIndex)
      this.getCameraUrl(id, this.cameraIndex).then(() => {
      })
      this.updateCameraIndex()
    },
    changeUrl(index) {
      console.log("切换" + index )
      let indexCode = this.updateRandomIndexCode(index)
      this.getCameraUrl(indexCode, index)
    },
    artemisCameraPage() {
      queryArtemisCamera({showMessage: 1}).then(res => {
        let arr = []
        for (let i = 0; i < res.data.length; i++) {
          arr.push(res.data[i])
        }
        let delCameraArray = [
          "1栋南面通道"
          , "1栋东面通道"
          , "1栋北面通道"
          , "1栋东面"
          , "2-3栋通道"
          , "2栋北面通道"
          , "3A栋西面"
          , "3_2栋通道"
          , "3栋北面通道"
          , "3栋南面主干道"
          , "3A栋北面通道"
          , "4栋北面"
          , "5栋南面停车场"
          , "5栋北面"
          , "5栋停车场"
          , "5号楼南路面"
          , "5号楼北停车场"
          , "5号楼北空地"
          , "5号楼北路面"
          , "5号楼东路面"
          , "5号楼西停车场"
          , "5号楼南停车场洗车场"
          , "6栋北面通道"
          , "6栋北面"
          , "7栋东面通道"
          , "西面电车棚1"
          , "8栋西面"
          , "8栋南面同道"
          , "西面电车棚2"
          , "9栋东面"
          , "10栋南面通道"
          , "12栋北面"
          , "12栋东面通道"
          , "12栋北面"
          , "12栋西面"
          , "13栋北面"
          , "13栋北面"
          , "13栋南面"
          , "14栋北面"
          , "14栋北面"
          , "15栋西面通道2"
          , "15栋北面通道"
          , "15栋北面"
          , "15栋东面"
          , "15栋西面通道"
          , "16栋北面"
          , "16栋东面"
          , "16号楼前"
          , "2号岗大门口"
          , "1号岗向大厦"
          , "创业大厦门口"
          , "创业大厦门前停车场"
          , "创业大厦后面通道"
          , "创业大厦门口"
          , "球场通道"

        ]
        this.cameraList = arr
            .filter(i => !i.name.includes("梯"))
            .filter(i => !delCameraArray.includes(i.name))
            .map(i => i.indexCode)
        for (let i = 0; i < 6; i++) {
          this.play();
        }
      }).catch(() => {
        // this.artemisCameraPage()
      })
    },
    //设置定时器，销毁定时器
    interval() {
      const timer = setInterval(this.play, 1000 * 30)
      this.$once('hook:beforeDestroy', () => {
        clearInterval(timer);
      })
    }

  },
  mounted() {
    this.interval()
    this.artemisCameraPage()
    console.log(222)
  },

}
</script>

<style scoped>

.box {
  background: #0F373F;
  width: 742.66px;
  height: 500px;
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
}

.column {
  flex-basis: 100%;
  display: flex;
  justify-content: space-between;
}

#top {
  margin-top: 25px;
}

#bottom {
  margin-bottom: 25px;
}
</style>
